<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>两款简单实用的jQuery插件版图片横向滚动效果丨www.update8.com</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
html, body {
background-color: #161f2a;
color: #FFF;
}
ul, li {
margin: 0;
padding: 0;
}
.examples_body {
clear: both;
position: relative;
}
.examples_body .bx_wrap {
margin-left: 70px;
margin-top: 30px;
}
.examples_body .bx_wrap ul img {
border: 2px solid #DDD;
}
.bx_wrap a.prev {
width: 27px;
height: 34px;
line-height: 17px;
outline-style: none;
outline-width: 0;
position: absolute;
top: 100px;
left: 75px;
text-indent: -9999px;
background: url(http://www.update8.com/js_img/4-14/images/icon_arrow_left.gif) no-repeat left;
}
.bx_wrap a.prev:hover {
background: url(http://www.update8.com/js_img/4-14/images/icon_arrow_left.gif) no-repeat right;
}
.bx_wrap a.next {
width: 27px;
height: 34px;
line-height: 17px;
left: 652px;
outline-style: none;
outline-width: 0;
position: absolute;
top: 100px;
text-indent: -9999px;
background: url(http://www.update8.com/js_img/4-14/images/icon_arrow_right.gif) no-repeat right;
}
.bx_wrap a.next:hover {
background: url(http://www.update8.com/js_img/4-14/images/icon_arrow_right.gif) no-repeat left;
}
</style>
<script type="text/javascript" src="http://www.update8.com/images/js/j.js"></script>
<script type="text/javascript" src="http://www.update8.com/js_img/4-14/images/script.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example1').bxCarousel({
display_num: 4, //显示的内容数量
move: 1, //一次移动几个内容
prev_image: 'http://www.update8.com/js_img/4-14/images/icon_arrow_left.gif',
next_image: 'http://www.update8.com/js_img/4-14/images/icon_arrow_right.gif',
margin: 10 //每个li元素之间距离
});
$('#example2').bxCarousel({
display_num: 3, //显示的内容数量
move: 1, //一次移动几个内容
auto: true, //加载页面后是否自动滚动
controls: false, //是否添加控制元件
margin: 10,
auto_hover: true //鼠标放上时是否暂停
});
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="examples_body">
<h3>Demo 2</h3>
<div class="bx_wrap">
<div class="bx_container">
<ul id="example2">
<li><img height="107" width="107" alt="LUFFY" src="http://www.update8.com/js_img/8-24/images/01.jpg"></li>
<li><img height="107" width="107" alt="ZORO" src="http://www.update8.com/js_img/8-24/images/02.jpg"></li>
<li><img height="107" width="107" alt="NAMI" src="http://www.update8.com/js_img/8-24/images/03.jpg"></li>
<li><img height="107" width="107" alt="SANJI" src="http://www.update8.com/js_img/8-24/images/04.jpg"></li>
<li><img height="107" width="107" alt="USOPP" src="http://www.update8.com/js_img/8-24/images/05.jpg"></li>
<li><img height="107" width="107" alt="Chopper" src="http://www.update8.com/js_img/8-24/images/06.jpg"></li>
<li><img height="107" width="107" alt="ROBIN" src="http://www.update8.com/js_img/8-24/images/07.jpg"></li>
</ul>
</div>
</div>
</div>
</body>
</html>